
<table id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="usernameTpl">
    <a href="" class="layui-table-link">{{d.username || ''}}</a>
</script>

<#--<script type="text/html" id="switchTpl">-->
    <#--<input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男">-->
<#--</script>-->

<#--<script type="text/html" id="checkboxTpl">-->
    <#--<input type="checkbox" name="" title="锁定" checked>-->
<#--</script>-->

<#--<script type="text/html" id="LAY_table_tpl_email">-->
    <#--<span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>-->
<#--</script>-->


<script src="${rc.contextPath}/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        var jquery = layui.$;
        //渲染
        table.render({
            elem: '#test'
            ,height: 'full-200'
            ,url: '${rc.contextPath}/begincode/index'
            ,page: {

            }
            ,cellMinWidth: 80
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
                ,{field:'username', title:'用户名',  edit: 'text', templet: '#usernameTpl'}
                ,{field:'sex', title:'性别',  edit: 'text', sort: true}
                ,{field:'city', title:'城市'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
        });


        //监听表格复选框选择
        table.on('checkbox(test)', function(obj){
            console.log(obj)
        });

        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段

        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    jquery.post("${rc.contextPath}/delete");
                    table.reload('test', {});
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.username
                }, function(value, index){
                    obj.update({
                        username: value
                    });
                    layer.close(index);
                });
            }
        });

        //监听排序
        table.on('sort(test)', function(obj){
            console.log(this, obj.field, obj.type)

            //return;
            //服务端排序
            table.reload('test', {
                initSort: obj
                //,page: {curr: 1} //重新从第一页开始
                ,where: { //重新请求服务端
                    key: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
        });


        var $ = layui.jquery, active = {
            getCheckData: function(){
                var checkStatus = table.checkStatus('test')
                        ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){
                var checkStatus = table.checkStatus('test')
                        ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){
                var checkStatus = table.checkStatus('test');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
            ,parseTable: function(){
                table.init('parse-table-demo', {
                    limit: 3
                });
            }
        };

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>